<template>
    <div class="container">
        <div class="content">
            <div class="bg-header">
                <div class="bg-img"></div>
                <div class="sure">
                    <i class="el-icon-arrow-left iconfont icon-back" @click="$router.back()"></i>
                    <span class='top-title'>确认订单</span>
                </div>
                <div @click="select = true">
                    <div class="card-address">
                        <p style="color: rgb(51, 51, 51);font-size: 14px">{{ address.receiveRegion }}</p>
                        <div class="address-nav">
                            <span>{{ address.receiveDetail }}</span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                        <div class="nickname">
                            <span>{{ address.receiveName }}</span>
                            <span style="margin-left: 18px;">{{ address.receivePhone }}</span>
                        </div>
                    </div>
                </div>

                <div class="main-content">
                    <div class="title-goods">
                        <img src="./img/logo_xiaomi_new.png" alt="">
                        <p style="font-weight: bold; flex-grow: 1">有品精选</p>
                    </div>
                    <div class="goods" v-for="item in list1" :key="item.id">
                        <img :src="item.avatar" alt="">
                        <div>
                            <span class="brief">{{ item.name }}</span>
                            <p class="details">
                                <span style="font-size: 15px;color: rgb(191, 17, 17);">￥{{ item.price }}
                                    <span style="font-size: 12px;">.00</span>
                                </span>
                                <span style="color: rgb(51, 51, 51);font-size: 12px;font-weight: bold;">
                                    x{{ item.count }}</span>
                            </p>
                            <span style="color: rgb(191, 17, 17);font-size: 10px;">7天无理由退货</span>
                        </div>
                    </div>
                    <div class="replenish">
                        <p class="added">
                            <span>发票类型</span>
                            <span>不开发票<i class="el-icon-arrow-right" style="width: 18px;"></i></span>
                        </p>
                        <p class="added" style="padding-right: 20px;">
                            <span>配送方式</span>
                            <span>快速配送</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="left">
                <div>
                    <span>合计：</span>
                </div>
                <div>
                    <span>￥</span>
                    <span>{{ sum }}</span>
                    <span>.00</span>
                </div>
                <div>
                    <span>免运费</span>
                </div>
            </div>
            <div class="submit" @click="submit()">
                <span>提交订单</span>
            </div>
        </div>
        <div class="Eeit" @click.self="select = false" v-if="select">
            <div class="Edit-content">
                <div v-for="item in list" :key="item.id" @click="setDefault(item.id)">
                    <div class="card-address">
                        <p style="color: rgb(51, 51, 51);font-size: 14px">{{ item.receiveRegion }}</p>
                        <div class="address-nav">
                            <span>{{ item.receiveDetail }}</span>
                        </div>
                        <div class="nickname">
                            <span>{{ item.receiveName }}</span>
                            <span style="margin-left: 18px;">{{ item.receivePhone }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { AddressApi, OrderApi } from '../../api'
import { CartApi } from "../../api/index";
export default {
    data() {
        return {
            cid: "",
            goodsList: [],
            select: false,
            list1: [],
            list: [],
            address: {},
            data: { ids: JSON.parse(sessionStorage.getItem('id')), account: 0, addressId: 45 }
        }
    },
    created() {
        this.getData();
        this.getdata()
    },
    computed: {
        sum: function () {
            return this.list1.reduce((result, item) => {
                return result += item.count * item.price;
            }, 0);
        },
    },
    methods: {
        async getdata() {
            try {
                this.list1 = await CartApi.getIdsList({ ids: this.goodsList })
            } catch (e) {/**/ }
        },
        async getData() {
            try {
                this.goodsList = JSON.parse(sessionStorage.getItem('id'))
                this.address = await AddressApi.getDefault()
                this.list = await AddressApi.getList()
            } catch {/**/
            }
        },
        async setDefault(id) {
            try {
                await this.$store.dispatch("address/setDefault", id);
                this.$miNotice("默认地址设置成功");
                this.select = false;
                this.getData();
            } catch (e) {
                /**/
            }
        },
        async submit() {
            try {
                this.data.account = this.sum;
                console.log(this.data)
                this.cid = await OrderApi.confirm({ ...this.data });
                let cid = this.cid
                this.$router.push({ path: `/pay/${cid}` });
            } catch (e) {/** */ }

        }
    },
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex-grow: 1;
    overflow: auto;

}

.show {
    display: flex;
    flex-direction: row;
    height: 44px;
    align-items: center;
    background-color: white;
}

.back img {
    width: 39px;
    padding-left: 6px;
}

.showtext {
    display: flex;
    color: rgb(51, 51, 51);
    font-size: 16px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin-right: 45px;
    flex-grow: 1;
}

.bg-header {
    width: 100%;
}

.bg-img {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 24vh;
    background-size: 100vh 24vh;
    background-image: url('./img/bg_page_header.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.sure {
    height: 88px;
    color: rgb(238, 238, 238);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
}

.el-icon-arrow-left {
    line-height: 48px;
    font-size: 30px;
    font-weight: bolder;
    position: absolute;
    left: 6px;
}

.top-title {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.card-address {
    display: flex;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: space-between;
    min-height: 82px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.address-nav {
    width: 100%;
    color: rgb(51, 51, 51);
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin-top: 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nickname {
    color: rgb(51, 51, 51);
    font-size: 14px;
    line-height: 19px;
    max-width: 60%;
}

.title-goods {
    display: flex;
    align-items: center;
}

.title-goods img {
    margin: 10px;
    width: 24px;
}

.main-content {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    flex-direction: row;
    min-height: 42px;
    margin: 10px;
}

.goods {
    display: flex;
    flex-direction: row;
    height: 110px;
    padding-bottom: 13px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 11px;
    box-sizing: border-box;
}

.goods div {
    flex-grow: 1;
}

.intro {
    margin-left: 10px;
    margin-right: 10px;
}

.details {
    display: flex;
    justify-content: space-between;
}

.brief {
    color: rgb(51, 51, 51);
    font-size: 14px;
    letter-spacing: 0.6px;
    line-height: 21px;
}

.replenish {
    display: flex;
    flex-direction: column;
}

.added {
    color: rgb(51, 51, 51);
    font-size: 14px;
    padding-bottom: 13px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 11px;
    display: flex;
    justify-content: space-between;
}

.footer {
    flex-shrink: 0;
    height: 53px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid rgba(244, 244, 244, 1);
}

.left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.left div:first-child span {
    color: rgb(51, 51, 51);
    font-size: 14px;
    font-weight: bold;
}

.left div:nth-child(2) span {
    color: rgb(191, 17, 17);
    font-size: 16px;
    font-weight: 600;
}

.left div:nth-child(2) span:nth-child(2) {
    font-size: 22px;
}

.left div:last-child span {
    color: rgb(51, 51, 51);
    font-size: 13px;
    font-weight: bold;
    margin-left: 5px;
}

.submit {
    background-color: rgb(191, 17, 17);
    border-radius: 20px;
    height: 38px;
    width: 100px;
    text-align: center;
    margin-right: 10px;
}

.submit span {
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: bold;
    vertical-align: -6px;
}

@keyframes edit {
    form {
        background-color: rgba(0, 0, 0, 0.1)
    }

    to {
        background-color: rgba(0, 0, 0, 0.7)
    }
}

.Eeit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation-name: edit;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.Edit-content {
    background-color: #fff;
    width: 100vw;
    height: 70vh;
    position: absolute;
    animation-name: Edit-content;
    animation-duration: 1s;
    animation-fill-mode: delimiters;
}

@keyframes Edit-content {
    from {
        bottom: -100%
    }

    to {
        bottom: 0
    }
}
</style>